<template>
  <canvas ref="canvas"></canvas>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as PIXI from 'pixi.js'

const canvas = ref(null)
const width = 500
const height = 500

function createRadialGradient(colors) {
  const w = 200
  const h = 200
  const c = document.createElement('canvas')
  c.width = w 
  c.height = h
  const ctx = c.getContext('2d')
  const grd = ctx.createRadialGradient(100, 100, 0, 100, 100, 100)
  
  ;[].concat(colors).forEach(({offset, color}) => {
    grd.addColorStop(offset, color)
  })

  ctx.fillStyle = grd
  ctx.fillRect(0, 0, 200, 200)

  return PIXI.Texture.from(c)
}

onMounted(() => {
  const app = new PIXI.Application({
    view: canvas.value,
    antialias: true,
    resolution: window.devicePixelRatio,
    width,
    height,
    backgroundColor: 0x000000
  })

  const spr = new PIXI.Sprite(createRadialGradient([
    {
      offset: 0,
      color: 'rgba(255, 255, 255, 0)'
    },
    {
      offset: .2,
      color: 'rgba(255, 255, 255, 0)'
    },
    {
      offset: 1,
      color: 'rgba(255, 255, 255, .5)'
    }
  ]))

  spr.position.set(width/2, height/2)
  spr.anchor.set(0.5)
  spr.width = 300
  spr.height = 300
  app.stage.addChild(spr)  
  
  const graphics = new PIXI.Graphics()
  graphics.lineStyle(0)
    .beginFill(0xFDA001, 1)
    .drawCircle(width/2, height/2, 150)
    .endFill()

  graphics.mask = spr
  
  app.stage.addChild(graphics)

})
</script>

<style>
canvas {
  width: 500px;
}
</style>